<script lang="ts" setup>
import { ref, onMounted } from 'vue'
//顶部类型切换
const value = ref(4)
//顶部类型数据
const options = [
    {
        id: 1,
        name: "全部项目"
    },
    {
        id: 2,
        name: "对接中"
    },
    {
        id: 3,
        name: "已签约"
    },
    {
        id: 4,
        name: "联营中"
    },
    {
        id: 5,
        name: "已完结"
    }
]
//项目类型
const radio3 = ref(1)
//所属行业
const values = ref('')
//所属行业数据
const option = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
//创建时间
const value2 = ref('')


//模拟数据
const arr = ref([{
    id: 1,
    name: "来伊份1",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
    childer: [
        {
            id: 101,
            name: "来伊份大木兰旗舰店",
            type: '商业圈',
            time: "2028-04-30",
            number1: 25.5784,
            number2: 73.3589,
            number3: 27.74,
            number4: 158,
        }
    ]
},
{
    id: 2,
    name: "来伊份2",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
},
{
    id: 3,
    name: "来伊份3",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
    childer: [
        {
            id: 301,
            name: "来伊份大木兰旗舰店",
            type: '商业圈',
            time: "2028-04-30",
            number1: 25.5784,
            number2: 73.3589,
            number3: 27.74,
            number4: 158,
        }
    ]
},
{
    id: 4,
    name: "来伊份4",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
    childer: [
        {
            id: 401,
            name: "来伊份大木兰旗舰店",
            type: '商业圈',
            time: "2028-04-30",
            number1: 25.5784,
            number2: 73.3589,
            number3: 27.74,
            number4: 158,
        }
    ]
},
{
    id: 5,
    name: "来伊份5",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
    childer: [
        {
            id: 501,
            name: "来伊份大木兰旗舰店",
            type: '商业圈',
            time: "2028-04-30",
            number1: 25.5784,
            number2: 73.3589,
            number3: 27.74,
            number4: 158,
        }
    ]
},
{
    id: 6,
    name: "来伊份6",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
    childer: [
        {
            id: 601,
            name: "来伊份大木兰旗舰店",
            type: '商业圈',
            time: "2028-04-30",
            number1: 25.5784,
            number2: 73.3589,
            number3: 27.74,
            number4: 158,
        }
    ]
},
{
    id: 7,
    name: "来伊份7",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
    childer: [
        {
            id: 701,
            name: "来伊份大木兰旗舰店",
            type: '商业圈',
            time: "2028-04-30",
            number1: 25.5784,
            number2: 73.3589,
            number3: 27.74,
            number4: 158,
        }
    ]
},
{
    id: 8,
    name: "来伊份8",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
    childer: [
        {
            id: 801,
            name: "来伊份大木兰旗舰店",
            type: '商业圈',
            time: "2028-04-30",
            number1: 25.5784,
            number2: 73.3589,
            number3: 27.74,
            number4: 158,
        }
    ]
},
{
    id: 9,
    name: "来伊份9",
    time: "2024-07-18",
    dizhi: "北京",
    number1: 25.5784,
    number2: 73.3589,
    number3: 27.74,
    number4: 158,
    childer: [
        {
            id: 901,
            name: "来伊份大木兰旗舰店",
            type: '商业圈',
            time: "2028-04-30",
            number1: 25.5784,
            number2: 73.3589,
            number3: 27.74,
            number4: 158,
        }
    ]
},])
const data = ref([])

const count = ref(1)
const load = () => {
    count.value += 1
    getdata()
}
const getdata = () => {
    var start = (count.value - 1) * 5
    var end = count.value * 5
    let list = arr.value.slice(start, end)
    list.forEach(item => data.value.push(item))
}
onMounted(() => {
    getdata()

})

</script>

<template>
    <div class="dojvprojects">
        <!-- 顶部切换部分 -->
        <div class="title">
            <div class="item" v-for="item in options" :key="item.id" :class="value == item.id ? 'active' : ''"
                @click="value = item.id">
                {{ item.name }}
            </div>
        </div>
        <!-- 搜索栏部分 -->
        <div class="search" style="font-size:12px;">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content ep-bg-purple">
                        关键词：<el-input style="width: 60%" placeholder="项目名称" />
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="grid-content ep-bg-purple-light">
                        项目类型：
                        <div style="">
                            <el-radio-group v-model="radio3" size="small">
                                <el-radio-button label="全部" :value="1" />
                                <el-radio-button label="线上" :value="2" />
                                <el-radio-button label="线下" :value="3" />
                                <el-radio-button label="线上+线下" :value="4" />
                            </el-radio-group>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-content ep-bg-purple-light">
                        所属行业：
                        <el-select v-model="values" placeholder="全部" style="width: 70%">
                            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light">
                        <p style="width: 30%;">创建时间：</p>
                        <div class="block">
                            <el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="YYYY-MM-DD" date-format="YYYY-MM-DD" time-format="YYYY-MM-DD"
                                style="width: 70%;" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="content" v-infinite-scroll="load" infinite-scroll-distance="10">
            <el-card style="min-width: 1100px" body-style="padding:0px" v-for="(item, index) in data" :key="index">
                <template #header>
                    <div class="card-header">
                        <div style="min-width: 80px;">
                            <p style="color: rgb(78, 169, 255);">{{ item.name }}</p>
                            <p>{{ item.dizhi }}</p>
                        </div>
                        <div class="dianpu">
                            <p>
                                <button>直营</button>
                                <button>实体零售</button>
                            </p>
                            <p>
                                <span>店铺数量:{{ item.childer ? item.childer.length : 0 }}</span>
                                <span>开始联营:{{ item.time }}</span>
                            </p>
                        </div>
                        <div class="lian">
                            项目状态:<button>联营中</button>
                        </div>
                        <div class="munber">
                            <p>累计分账</p>
                            <p>{{ item.number1 }}万</p>
                        </div>
                        <div class="munber">
                            <p>应收回款</p>
                            <p>{{ item.number2 }}万</p>
                        </div>
                        <div class="munber">
                            <p>回款比例</p>
                            <p>{{ item.number3 }}%</p>
                        </div>
                        <div class="munber">
                            <p>联营事件</p>
                            <p>{{ item.number4 }}天</p>
                        </div>
                        <div class="gn">
                            <button>导入信息</button>
                            <button>导入店铺</button>
                            <button>联营计算</button>

                        </div>
                    </div>
                </template>
                <div class="content-nr" v-if="item.childer?.length != 0">
                    <div class="item" v-for="(v, indexs) in item.childer" :key="indexs">
                        <div style="min-width: 350px;max-width: 350px;">
                            <span style="color: rgb(78, 169, 255);margin-right: 10px;">{{ v.name }}</span>
                            <span>[{{ v.type }}]</span>
                            <span style="color: rgb(128, 128, 128);margin-left: 10px;">租约到期:{{ v.time }}</span>
                        </div>
                        <div class="lian">
                            <button>联营中</button>
                        </div>
                        <p class="munber">{{ v.number1 }}万</p>
                        <p class="munber">{{ v.number2 }}万</p>
                        <p class="munber">{{ v.number3 }}万</p>
                        <p class="munber">{{ v.number4 }}万</p>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<style lang="less" scoped>
.dojvprojects {
    background-color: #fff;
}

.grid-content {
    border-radius: 4px;
    min-height: 50px;
    display: flex;
    align-items: center;

}

.el-card {
    border-radius: none;
}

.el-card__body {
    padding: 0;
}



.el-card.is-always-shadow {
    box-shadow: none
}

.demo-datetime-picker .block {
    text-align: center;
    display: flex;
    justify-content: center;
}

.title {
    background-color: #fafafa;
    display: flex;

    .item {
        padding: 5px 10px;
        border: 1px solid #e0dfdf;
        margin: 0px 1px;
        border-radius: 5px 5px 0px 0px;
    }

    .active {
        background-color: #fff;
        color: rgb(42, 121, 255);
        border-bottom: none;
    }
}

.content {
    font-size: 13px;
    overflow-y: auto;
    height: calc(100vh - 210px);

    .card-header {
        display: flex;
        align-items: center;


        .dianpu {
            min-width: 250px;

            p {
                button {
                    background-color: #fff;
                    border-radius: 3px;
                    padding: 2px 5px;
                    margin: 0px 8px;
                    color: rgb(42, 121, 255);
                    border: 1px solid rgb(42, 121, 255)
                }

                span {
                    color: rgb(128, 128, 128);
                    margin: 0px 5px;
                }
            }
        }

        .lian {
            min-width: 150px;

            button {
                background-color: rgb(236, 128, 141);
                color: #fff;
                border: none;
                padding: 2px 5px;
                border-radius: 3px;
                margin-left: 13px;
            }
        }

        .munber {
            min-width: 80px;
            text-align: center;

            :nth-child(1) {
                color: rgb(176, 173, 170);
            }

            :nth-child(2) {
                color: rgb(231, 99, 115);
            }
        }

        .gn {
            min-width: 300px;
            text-align: center;

            button {
                background-color: rgb(42, 121, 255);
                color: #fff;
                border: none;
                padding: 2px 5px;
                border-radius: 3px;
                margin-left: 13px;
            }

        }
    }

    .item {
        display: flex;
        align-items: center;
        height: 50px;
        background-color: rgb(247, 247, 247);
        padding: 20px;
        border-bottom: 1px solid rgb(220, 220, 220);

        .lian {
            min-width: 130px;
            text-align: center;

            button {
                background-color: rgb(236, 128, 141);
                color: #fff;
                border: none;
                padding: 2px 5px;
                border-radius: 3px;
                margin-left: 13px;
            }
        }

        .munber {
            min-width: 80px;
            text-align: center;
        }
    }
}
</style>
